<template>
  <div class="employees-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          <span>共{{ total }}条记录</span>
        </template>
        <template #right>
          <el-button type="primary" size="small" @click="exportExcel">
            excel导出
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="$router.push('/import?type=batchuser')"
          >
            excel导入
          </el-button>
          <el-button type="primary" size="small" @click="addemployeeFn">
            新增员工
          </el-button>
        </template>
      </PageTools>
      <el-card v-loading="loading" style="margin-top: 10px">
        <el-table :data="list" border>
          <el-table-column
            type="index"
            :index="indexFn"
            label="序号"
            sortable=""
          />
          <el-table-column prop="username" label="姓名" sortable="" />
          <el-table-column prop="mobile" label="手机号" sortable="" />
          <el-table-column prop="workNumber" label="工号" sortable="" />
          <el-table-column
            prop="formOfEmployment"
            label="聘用形式"
            :formatter="formatterFn"
            sortable=""
          />

          <el-table-column prop="departmentName" label="部门" sortable="" />
          <el-table-column prop="timeOfEntry" label="入职时间" sortable="">
            <template #default="{ row }">
              {{ row.timeOfEntry | formatterTime('YYYY年MM月DD日') }}
            </template>
          </el-table-column>
          <el-table-column
            prop=""
            label="操作"
            sortable=""
            fixed="right"
            width="280"
          >
            <template #default="{ row }">
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
              >
                查看
              </el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small">角色</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteEmployee(row.id)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="height: 60px; margin-top: 10px">
          <!--
              @current-change 当前页变化，改变当前页触发执行
              @size-change 每页条数变化了，切换了每页的条数
              page-sizes 可供选择的每页条数
              layout 布局控件，决定了显示多少个控件
              page-size每页显示条目个数
              current-page	当前页数，支持 .sync 修饰符
              total	总条目数
             -->
          <el-pagination
            :current-page="page"
            :page-sizes="[1, 2, 3, 4, 5, 10]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
      <addEmployeeVue :show-dialog.sync="showDialog" />
    </div>
  </div>
</template>
<script>
import { getUserListApi, delEmployee } from '@/api/employees'
import { formatterTime } from '@/filter'
import obj from '@/constant/employees'
import addEmployeeVue from './components/add-employee.vue'
export default {
  components: {
    addEmployeeVue
  },
  data() {
    return {
      list: [], // 员工列表
      total: 0, // 数据总数
      page: 1,
      pageSize: 2,
      loading: false,
      showDialog: false // 添加员工弹层打开状态
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    async getUserList() {
      this.loading = true
      const { data } = await getUserListApi(this.page, this.pageSize)
      this.list = data.rows
      this.total = data.total
      this.loading = false
    },
    indexFn(index) {
      // 每页的index是递增的
      // 每页起始序号从0开始，所以先加1
      // 每页的第一条数据的序号 = 1 + （页码数 - 1） * 数据条数
      // 每页的第一条数据的序号 = 1 + 前面页的总数条数
      return index + 1 + (this.page - 1) * this.pageSize
    },
    // 每页条数变化了，切换了每页的条数
    handleSizeChange(val) {
      this.pageSize = val
      // 切换每页条数时，让页码回归到第一页
      this.page = 1
      this.getUserList()
      console.log(`每页 ${val} 条`)
    },
    // 当前页变化，改变当前页触发执行
    handleCurrentChange(val) {
      this.page = val
      this.getUserList()
      console.log(`当前页: ${val}`)
    },

    // 用来格式化列的内容
    // 注意：formatter一定要通过return返回处理好的数据
    formatterFn(row, column, cellValue, index) {
      // 常量文件夹，其实就是提前定义好数据的对应关系，来进行展示
      const { hireType } = obj
      const result = hireType.find((item) => item.id === +cellValue)
      return result ? result.value : '未知'
      // row 一行的数据
      // column 列的各种信息（几乎用不到）
      // cellValue 当前列的值
      // index 索引
      // if (cellValue === 1 || cellValue === '1') {
      //   return '正式'
      // } else if (cellValue === 2 || cellValue === '2') {
      //   return '非正式'
      // }

      // 3 合同工
      // 4 临时工
      // 5 小时工
      // 6 钟点工
      // console.log(row, column, cellValue, index)
      // return cellValue
    },

    // 打开弹层
    addemployeeFn() {
      this.showDialog = true
    },
    async exportExcel() {
      // 请求数据总数
      const {
        data: { rows }
      } = await getUserListApi(1, this.total)

      import('@/vendor/Export2Excel').then((excel) => {
        // 表头
        const tHeader = [
          '姓名',
          '手机号',
          '工号',
          '聘用形式',
          '转正日期',
          '部门',
          '入职时间'
        ]
        const headersRelations = {
          姓名: 'username',
          手机号: 'mobile',
          入职时间: 'timeOfEntry',
          聘用形式: 'formOfEmployment',
          转正日期: 'correctionTime',
          工号: 'workNumber',
          部门: 'departmentName'
        }
        // 多表头
        const multiHeader = [['姓名', '主要信息', '', '', '', '', '部门']]
        // 合并单元格
        const merges = ['A1:A2', 'B1:F1', 'G1:G2']
        const data = this.formatJson(rows, tHeader, headersRelations)
        excel.export_json_to_excel({
          header: tHeader, // 表头
          data, // 表体内容（二维数组）
          filename: '员工统计表', // 导出的文件名
          autoWidth: true, // 表格宽度是否自适应
          bookType: 'xlsx', // 导出的文件类型
          multiHeader: multiHeader, // 配置多表头
          merges: merges // 合并单元格
        })
      })
    },
    formatJson(rows, tHeader, headersRelations) {
      // arr 最外层数组，包含每一行的数据
      const arr = []
      // 分析1:数组的数量，来自rows
      // rows：数组的长度（决定了excel里面有多少行数据）
      // 分析2:有多少列，根据表头来决定
      // tHeader:决定了每行有几列
      // headersRelations   中英键对照，中文键转英文

      rows.forEach((item) => {
        // itemarr:每一行的数据
        const itemarr = []
        tHeader.forEach((it) => {
          // it：每一列的键
          // 转换成英文的键
          const englishKey = headersRelations[it]
          let val = item[englishKey]

          // 对聘用形式数据进行加工
          if (englishKey === 'formOfEmployment') {
            const { hireType } = obj
            const result = hireType.find((item) => item.id === +val)
            val = result ? result.value : '未知'
          }

          // 对时间进行加工，格式：****年**月**日
          // if (englishKey === 'timeOfEntry' || englishKey === 'correctionTime') {
          //   val = formatterTime(val, 'YYYY年MM月DD日')
          // }
          if (['timeOfEntry', 'correctionTime'].includes(englishKey)) {
            val = formatterTime(val, 'YYYY年MM月DD日')
          }
          itemarr.push(val)
        })
        arr.push(itemarr)
      })
      return arr
    },
    async deleteEmployee(id) {
      try {
        await this.$confirm('你确定要删除该员工吗')
        await delEmployee(id)
        // this.$emit('getUserList()')
        this.getUserList()
        this.$message.success('删除员工成功')
        // console.log(id)
      } catch (error) {
        // console.log(error);
      }
    }
  }
}
</script>
<style scoped></style>
